<template>
  <view class="flex-direction flex">
    <view class="page-container flex flex-direction">
      <view class="flex align-center user__info justify-between" @click="_goPage('/pages/mine/info', '')">
        <view class="flex align-center">
          <image class="user__info__image" :src="userStore.avatar"></image>
          <text class="user__info__name">{{ userStore.fullname }} :=)))</text>
        </view>
        <u-icon name="arrow-right" color="#242424"></u-icon>
      </view>
      <view class="ax-card-32 flex justify-around">
        <view class="flex flex-direction align-center" hover-class="active--hover"
          @click="_goPage('/pages/flight/FlightOrders', '?type=0')">
          <uni-icons custom-prefix="ax-icon" type="ax-icon-c_neirong" size="36" color="#D59E32"></uni-icons>
          <text class="font24 margin-top-xs">机票订单</text>
        </view>
        <view class="flex flex-direction align-center" hover-class="active--hover"
          @click="_goPage('/pages/hotel/HotelOrders', '?type=1')">
          <uni-icons custom-prefix="ax-icon" type="ax-icon-c-qianbao" size="36" color="#D59E32"></uni-icons>
          <text class="font24 margin-top-xs">酒店订单</text>
        </view>
      </view>

      <view class="user__card flex flex-direction">

        <view class="user__card__item flex flex-direction" hover-class="cell--hover">
          <navigator type="primary" url="/pages/flight/FlightOrders">
            <button type="default" class="u-reset-button flex align-center justify-between w-full">机票订单</button>
          </navigator>
          <navigator type="primary" url="/pages/hotel/HotelOrders">
            <button type="default" class="u-reset-button flex align-center justify-between w-full">酒店订单</button>
          </navigator>
          <button class="u-reset-button flex align-center justify-between w-full" open-type="feedback">
            <view class="flex align-center">
              <uni-icons custom-prefix="ax-icon" type="ax-icon-c_tianxie" size="22"></uni-icons>
              <text class="font28 margin-left-sm">我要反馈</text>
            </view>
            <u-icon name="arrow-right" color="#242424"></u-icon>
          </button>
          <navigator type="default" url="/pages/about/about">
            <button type="default" class="u-reset-button flex align-center justify-between w-full">关于</button>
          </navigator>
        </view>
      </view>
    </view>

    <template v-if="userStore.isLogined">
      <view class="uni-padding-wrap uni-common-mt content">
        <view class="mt-auto">
          <button type="warn" @click="logout()">
            退出登录
          </button>
        </view>
      </view>
    </template>
  </view>
</template>

<script setup>
  import {
    getCurrentInstance,
    onMounted,
    ref
  } from 'vue'

  import {
    useUserStore
  } from '@/store/index'
  import {
    onShow,
    onLoad,
    onReady,
    onNavigationBarButtonTap
  } from '@dcloudio/uni-app'

  const userStore = useUserStore()

  onLoad((options) => {
    console.log('on...load...', options)
  })

  onMounted(() => {
    console.log('on mounted......')
  })

  onShow(() => {
    console.log("onpageshow", userStore.isLogined, userStore.fullname);
  })

  onReady(() => {
    // #ifdef APP-PLUS
    // const instance = getCurrentInstance();
    // const webview = instance.proxy.$scope.$getAppWebview();

    // webview.setStyle({
    //   titleNView: {
    //     buttons: [
    //         {
    //             "key": "home",
    //             "fontSrc": "/static/webfonts/fa-solid-900.ttf", // 字体文件路径
    //             "text": "\uf015", // Unicode 图标代码
    //             "fontSize": "16px"
    //         }
    //     ]
    //   }
    // });

    // webview.setStyle({
    //   titleNView: {
    //     buttons: [{
    //       "type": 'home',
    //       "key": 'home'
    //     }]
    //   }
    // })

    // #endif
  })

  onNavigationBarButtonTap((e) => {
    console.log(e)
    if (e.type === 'home') {
      uni.reLaunch({url: '/pages/home/home'})
    }
  });

  function logout() {
    userStore.logout()
    uni.switchTab({
      url: '/pages/home/home'
    })
  }
</script>

<style lang="scss" scoped>
  /* styles.scss 或 vue 文件的 style 部分 */
  :root {
    --primary-color: #ff2442; // 定义 CSS 变量
  }

  $primary-color: var(--primary-color); // 将 SCSS 变量绑定到 CSS 变量

  .bg-image {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 750rpx;
    z-index: 1;
  }

  .is-hover {
    color: rgba(255, 255, 255, 0.6);
    background-color: #179b16;
    border-color: #179b16;
  }

  @import '@/uni_modules/uni-scss/variables.scss';

  .bg-image {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 750rpx;
    z-index: 1;
  }

  .navbar-title {
    padding: 0 32rpx;
    width: 100%;
    font-size: 40rpx;
    font-weight: bold;
    color: $ax-text-color-black;
  }

  .page-container {
    z-index: 2;
    padding: 0 32rpx;
  }

  .user {
    &__info {
      margin: 48rpx 0;

      &__image {
        width: 120rpx;
        border-radius: 50%;
        height: 120rpx;
        border: 4rpx solid #ffffff;
      }

      &__name {
        font-size: 42rpx;
        font-weight: bold;
        margin-left: 24rpx;
        color: $uni-main-color;
        // color: white;
      }
    }

    &__card {
      padding: 24rpx 32rpx;
      border-radius: 20rpx;
      background-color: #fff;

      &__item {
        padding: 24rpx 0;
      }
    }
  }

  .cell--hover {
    background-color: #f8f8f8;
  }
</style>